<template>
  <div id="app">
    <van-tabs v-model="active" class="box" swipeable>
      <van-tab
        class="nav"
        v-for="item in imgcateList"
        :key="item.id"
        :title="item.title"
      >
        <div
          v-for="item in imgitemList"
          :key="item.id"
          class="additem"
          @click="$router.push({ path: `/informdetails/${item.id}` })"
        >
          <img :src="item.img_url" alt="" />
          <div class="addclass">
            <h4>{{ item.title }}</h4>
            <p>
              {{ item.zhaiyao }}
            </p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getimgcategoryAPI, getimagesAPI } from "../apis/user";
export default {
  data() {
    return {
      active: 0,
      imgcateList: [],
      imgitemList: [],
    };
  },
  async created() {
    const res = await getimgcategoryAPI();
    console.log(res);
    if (res.data.status === 0) {
      res.data.message.unshift({ title: "全部", id: 0 });
      this.imgcateList = res.data.message;
      console.log(this.imgcateList);
    }
    const res2 = await getimagesAPI(this.active);
    console.log(res2);
    if (res2.data.status === 0) {
      this.imgitemList = res2.data.message;
    }
  },
};
</script>
<style lang="less" scoped>
.box {
  margin-top: 40px;
}
.additem {
  position: relative;
  overflow: hidden;
}
.addclass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.4);
}
.nav {
  //   background: pink;
  color: #fff;
  img {
    width: 100%;
    height: 300px;
  }
  h4 {
    font-size: 15px;
  }
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
  }
}
</style>